<template>
  <div class="div1">
    <slot></slot>
  </div>
</template>

<script setup></script>

<style scoped lang="scss">
.div1 {
  width: 100%;
  height: 100%;
  position: relative;
  border: 1px solid #0b7ffe;
  box-sizing: border-box;
  // overflow: hidden;
}

.div1::before,
.div1::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  animation: div1Ani 1500ms infinite linear;
}

.div1::before {
  top: -5px;
  left: -5px;
  border-top: 1px solid #0b7ffe;
  border-left: 1px solid #0b7ffe;
}

.div1::after {
  right: -5px;
  bottom: -5px;
  border-bottom: 1px solid #0b7ffe;
  border-right: 1px solid #0b7ffe;
}

@keyframes div1Ani {
  0% {
    width: 30px;
    height: 30px;
  }
  50% {
    width: calc(100% + 9px);
    height: calc(100% + 9px);
  }
  100% {
    width: 30px;
    height: 30px;
  }
}
</style>
